import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init();
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography>
          <Title level={3}>开始</Title>
          <Paragraph>
            <Text>在Three.js中，性能监视器被封装在Stats类中；用法：</Text>
          </Paragraph>
          <Paragraph>
            <div className="codeBox">
              <p>{`var stats = new Stats();`}</p>
              <p>{`stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom`}</p>
              <p>{`document.body.appendChild( stats.dom );`}</p>
              <p>{`function animate() {`}</p>
              <p>{`stats.begin();`}</p>
              <p>{`// monitored code goes here`}</p>
              <p>{`stats.end();`}</p>
              <p>{`requestAnimationFrame( animate );`}</p>
              <p>{`}`}</p>
              <p>{`requestAnimationFrame( animate );`}</p>
            </div>
          </Paragraph>
          <Paragraph>
            <Text>轨道控制器（OrbitControls） 用法：</Text>
            <p>
              <Text code>
                const controls = new THREE.OrbitControls( camera,
                renderer.domElement );
              </Text>
            </p>
            <p>
              <Text code>controls.update();;</Text>
            </p>
          </Paragraph>
          <Paragraph>
            <Text>在场景中产生阴影，有几个要素：</Text>
            <p>
              1、<Text code>renderer.shadowMap.enabled = true</Text>
            </p>
            <p>
              2、<Text code>light.castShadow = true;</Text>{' '}
              SpotLight或者DirectionalLight都可以，但灯光不能离物体太远
            </p>
            <p>
              3、接收阴影的Mesh: <Text code>plane.receiveShadow = true;</Text>
            </p>
            <p>
              4、产生阴影的Mesh: <Text code>cube.castShadow = true;</Text>
            </p>
            <p>
              5、基于light.shadow的相关属性默认值，场景的大小不能太大，可以先在0.1~100内测试
            </p>
            <p>
              <a href="https://threejs.org/docs/index.html#api/zh/lights/shadows/LightShadow">
                https://threejs.org/docs/index.html#api/zh/lights/shadows/LightShadow
              </a>
            </p>
          </Paragraph>
        </Typography>

        <div
          id="WebGL-output-test"
          style={{ width: '600px', height: '600px', position: 'relative' }}
        />
      </Card>
    );
  }
}
